<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box1 {
                width: 300px;
                height: 300px;
                background-color: greenyellow;
            }

            #box2 {
                width: 200px;
                height: 200px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3"></div>
            </div>
        </div>

        <script>
            /* 
                事件的传播机制：
                    - 在DOM中，事件的传播可以分为三个阶段：
                        1.捕获阶段 （由祖先元素向目标元素进行事件的捕获）（默认情况下，事件不会在捕获阶段触发）
                        2.目标阶段 （触发事件的对象）
                        3.冒泡阶段 （由目标元素向祖先元素进行事件的冒泡）

                    - 事件的捕获，指事件从外向内的传导，
                        当前元素触发事件以后，会先从当前元素最大的祖先元素开始向当前元素进行事件的捕获

                    - 如果希望在捕获阶段触发事件，可以将addEventListener的第三个参数设置为true
                        一般情况下我们不希望事件在捕获阶段触发，所有通常都不需要设置第三个参数

            */

            const box1 = document.getElementById("box1")
            const box2 = document.getElementById("box2")
            const box3 = document.getElementById("box3")

            box1.addEventListener("click", event => {
                alert("1" + event.eventPhase) // eventPhase 表示事件触发的阶段
                //1 捕获阶段 2 目标阶段 3 冒泡阶段
            })

            box2.addEventListener("click", event => {

                alert("2" + event.eventPhase)
            })

            box3.addEventListener("click", event => {
                alert("3" + event.eventPhase)
            })

        </script>
    </body>
</html>
